<template>
  <div class="settings">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统设置</span>
            </div>
          </template>
          
          <el-form :model="form" label-width="120px">
            <el-form-item label="网站名称">
              <el-input v-model="form.siteName" />
            </el-form-item>
            <el-form-item label="网站描述">
              <el-input v-model="form.description" type="textarea" />
            </el-form-item>
            <el-form-item label="维护模式">
              <el-switch v-model="form.maintenance" />
            </el-form-item>
            <el-form-item label="默认语言">
              <el-select v-model="form.language" placeholder="请选择语言">
                <el-option label="中文" value="zh" />
                <el-option label="English" value="en" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存设置</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>操作记录</span>
            </div>
          </template>
          
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  siteName: '后台管理系统',
  description: '这是一个基于Vue 3和Element Plus的后台管理系统',
  maintenance: false,
  language: 'zh'
})

const activities = ref([
  {
    content: '创建了系统',
    timestamp: '2023-06-01'
  },
  {
    content: '更新了用户管理模块',
    timestamp: '2023-06-03'
  },
  {
    content: '配置了权限系统',
    timestamp: '2023-06-05'
  }
])

const onSubmit = () => {
  console.log('保存设置:', form.value)
}
</script>

<style scoped>
.settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>